<template>
  <div class="body">
    <el-card class="box-card">
      <div class="text item">
        <!-- input表单部分 -->
        <el-form :inline="true" ref="directory" :model="form">
          <el-form-item class="right">
            <el-button
              v-if="routerName === 'subjectSort'"
              size="medium"
              type="primary"
              @click="addDialogVisible=true"
            >新增目录</el-button>
            <el-button v-else size="medium" type="primary" @click="addDialogVisible=true">新增标签</el-button>
            <a v-if="openSubjectSort" href="javascript:void(0)" @click="$router.push('/subject')">
              <i class="el-icon-back"></i>
              返回学科
            </a>
          </el-form-item>
          <el-form-item class="form-item-lable" label="目录名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item class="form-item-lable" label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="qiyong"></el-option>
              <el-option label="禁用" value="jinyong"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="right-btn">
            <el-button @click="clearInput">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 警告条 -->
        <el-alert type="info" show-icon>
          <span slot="title">数据一共&nbsp;{{total}}&nbsp;条</span>
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" border>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="所属科目" prop="subjectName"></el-table-column>
          <el-table-column v-if="routerName ==='subjectSort'" label="目录名称" prop="directoryName"></el-table-column>
          <el-table-column v-else label="标签名称" prop="tagName"></el-table-column>
          <el-table-column label="创建者" prop="username"></el-table-column>
          <el-table-column label="创建日期" prop="addDate">
            <template slot-scope="scope">{{scope.row.addDate | formatTime}}</template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals"></el-table-column>
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <div v-if="scope.row.state===1">已启用</div>
              <div v-else>已禁用</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a href="javascript:void(0)" v-if="scope.row.state===0" @click="resetState(scope.row)">启用</a>
              <a href="javascript:void(0)" v-else @click="resetState(scope.row)">禁用</a>
              <span v-if="scope.row.state===1">
                <a href="javascript:void(0)" @click="openResetDialog(scope.row)">修改</a>
                <a href="javascript:void(0)" @click="open(scope.row)">删除</a>
              </span>
              <span v-else class="forbidden">
                <span>修改</span>
                <span>删除</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1, 5, 10, 20]" :page-size="pagesize" layout="prev, pager, next, sizes, jumper" :total="total" background></el-pagination>
      </div>
    </el-card>
    <!-- 目录的添加组件 -->
    <addSort v-if="this.$route.name==='subjectSort'" :id="subjectID" :openSubjectSort="!openSubjectSort" :bool="addDialogVisible" @offAdd="offAdd" :sub="{subjectID, subjectName}" :names="this.$route.name"></addSort>
    <!-- 标签的添加组件 -->
    <addSort v-else :openSubjectSort="!openSubjectSort" :bool="addDialogVisible" @offAdd="offAdd" :names="this.$route.name" :id="this.$route.query.id"></addSort>
    <!-- 目录的修改组件 -->
    <resetSort v-if="this.$route.name==='subjectSort'" :openSubjectSort="!openSubjectSort" :row="row" :bool="resetDialogVisible" @offReset="reset" :id="subjectID"></resetSort>
    <!-- 标签的修改组件 -->
    <resetSort :openSubjectSort="!openSubjectSort" v-else :row="row" :bool="resetDialogVisible" @offReset="reset" :id="subjectID"></resetSort>
  </div>
</template>

<script>
import { getDirectoryList, resetDirectorysStatet, deleteDirectory, getTags, resetTagsStatet, deleteTag } from '@/assets/api/subjectManage.js';
import addSort from './component/addSort';
import resetSort from './component/resetSort';
export default {
  name: 'subjectSort',
  data () {
    return {
      // 打开页面的方式
      openSubjectSort: false,
      // 列表数据
      tableData: [],
      // 表单内容
      form: {
        name: '',
        state: ''
      },
      // 当前页  页数
      page: 1,
      // 当前页  条数
      pagesize: 10,
      // 总条数
      total: 0,
      // 添加组件的显隐
      addDialogVisible: false,
      // 修改组件的显隐
      resetDialogVisible: false,
      // 对应的那一条数据
      row: {},
      // 科目传的id
      subjectID: this.$route.query.id,
      subjectName: this.$route.query.subjectName,
      routerName: this.routeName
    };
  },
  components: { addSort, resetSort },
  created () {
    this.routerName = this.$route.name;
    if (this.subjectID !== undefined) {
      this.openSubjectSort = true;
    }
    this.getList();
  },
  computed: {
    headerName: function () {
      return this.$route.query.subjectName;
    },
    routeName: function () {
      return this.$route.name;
    }
  },
  watch: {
    headerName (val) {
      if (val === undefined) {
        this.openSubjectSort = false;
        this.getList();
      }
    },
    routeName (val) {
      this.routerName = val;
      this.form.name = '';
      this.form.state = '';
      this.getList();
    }
  },
  methods: {
    // 获取数据
    async getList () {
      if (this.openSubjectSort) {
        if (this.$route.name === 'subjectSort') {
          try {
            const { data } = await getDirectoryList({
              page: this.page,
              pagesize: this.pagesize,
              subjectID: this.$route.query.id
            });
            this.total = data.counts;
            this.tableData = data.items;
          } catch (err) {
            this.$message.error(err);
          }
        } else {
          try {
            const { data } = await getTags({
              page: this.page,
              pagesize: this.pagesize,
              subjectID: this.$route.query.id
            });
            this.total = data.counts;
            // console.log(data);
            this.tableData = data.items;
          } catch (err) {
            this.$message.error(err);
          }
        }
      } else {
        if (this.$route.name === 'subjectSort') {
          try {
            const { data } = await getDirectoryList({
              page: this.page,
              pagesize: this.pagesize
            });
            this.total = data.counts;
            this.tableData = data.items;
          } catch (err) {
            this.$message.error(err);
          }
        } else {
          try {
            const { data } = await getTags({
              page: this.page,
              pagesize: this.pagesize
            });
            this.total = data.counts;
            // console.log(data);
            this.tableData = data.items;
          } catch (err) {
            this.$message.error(err);
          }
        }
      }
    },
    // 条数 变化
    handleSizeChange (newPageSize) {
      this.pagesize = newPageSize;
      this.getList();
    },
    // 当前页变化 执行
    handleCurrentChange (newPage) {
      this.page = newPage;
      this.getList();
    },
    // 点击清空关键字
    clearInput () {
      this.form.name = '';
      this.form.state = '';
      this.getList();
    },
    // 点击搜索
    async search () {
      this.tableData = [];
      let state = 0;
      if (this.form.state === 'qiyong') {
        state = 1;
      }
      if (this.$route.name === 'subjectSort') {
        try {
          const { data } = await getDirectoryList({
            page: this.page,
            pagesize: this.pagesize,
            directoryName: this.form.name.trim(),
            state
          });
          this.total = data.counts;
          this.tableData = data.items;
        } catch (err) {
          this.$message.error(err);
        }
      } else {
        try {
          const { data } = await getTags({
            page: this.page,
            pagesize: this.pagesize,
            tagName: this.form.name.trim(),
            state
          });
          this.total = data.counts;
          this.tableData = data.items;
        } catch (err) {
          this.$message.error(err);
        }
      }
    },
    // 点击确定 添加关闭并刷新
    offAdd () {
      this.del = false;
      this.getList();
      this.addDialogVisible = false;
    },
    // 点击修改
    openResetDialog (row) {
      // console.log(row);
      this.row = row;
      this.resetDialogVisible = true;
    },
    // 确认修改
    reset () {
      this.resetDialogVisible = false;
      this.getList();
    },
    // 修改状态
    async resetState (row) {
      if (row.state === 0) {
        row.state = 1;
        if (this.$route.name === 'subjectSort') {
          await resetDirectorysStatet({ id: row.id, state: row.state });
          this.$message.success('修改成功');
        } else {
          await resetTagsStatet({ id: row.id, state: row.state });
          this.$message.success('修改成功');
        }
      } else {
        row.state = 0;
        if (this.$route.name === 'subjectSort') {
          await resetDirectorysStatet({ id: row.id, state: row.state });
          this.$message.success('修改成功');
        } else {
          await resetTagsStatet({ id: row.id, state: row.state });
          this.$message.success('修改成功');
        }
      }
    },
    // 点击删除
    open (row) {
      this.$msgbox({
        title: '提示',
        message: '此操作将永久删除该目录,是否继续',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          if (this.$route.name === 'subjectSort') {
            await deleteDirectory(row.id);
          } else {
            await deleteTag(row.id);
          }
          this.getList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  font-size: 14px;
}

.form-item-lable {
  margin-right: 20px;
  margin-bottom: 10px;
  /deep/ .el-form-item__label {
    background-color: #f2f2f2;
    padding: 0 10px;
  }
}

.item {
  .el-table {
    margin: 10px 0;
  }

  .right-btn {
    float: right;
    margin-bottom: 10px;
  }
  margin-bottom: 18px;
  /deep/ .el-form-item__label {
    font-size: 14px;
  }

  .right {
    display: block;
    margin-bottom: 10px;

    a {
      line-height: 36px;
    }
  }
  .el-pagination {
    float: right;
    margin-bottom: 20px;
  }
  a {
    display: inline-block;
    margin-right: 20px;
    color: #40b8ff;
    text-decoration: none;
    font-size: 14px;
  }
  .forbidden {
    span {
      display: inline-block;
      font-size: 14px;
      margin-right: 20px;
      color: #c4d6ed;
    }
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.clearfix {
  margin: 5px 0;
}
</style>
